设为首页收藏本站
开启辅助访问

css新世界笔记

您所在的位置：网站首页 › fit transform函数 › css新世界笔记

css新世界笔记

2023-06-19 01:18| 来源: 网络整理| 查看: 265

CSS新世界是知名博主张鑫旭CSS世界三部曲的最后⼀部，主要讲述CSS3及其之后很多实⽤

的新特性，介绍了很多潜藏的特性和有⽤的细节。CSS世界介绍的是CSS2.1规范及其之前内

容，CSS选择器世界介绍的是CSS LV1-LV4的选择器知识，CSS新世界介绍的是CSS3及其之

后的知识。

CSS基础知识

CSS全局关键字属性值

inherit 继承关键字 实现属性继承，如 input { font-family:

inherit;height:inherit }

initial 初始关键字 适合⽤在需要重置某些CSS样式，但⼜不记得初始值的场景，

如 ul { font-size: 14px } ul li:last-child { font-size: initial }

unset 不固定值关键字 只有配合all属性使⽤才有意义，批量重置内置样式，如

dialog { all: unset }

revert 恢复关键字 让当前元素的样式还原成浏览器内置的样式，如 ol { list-

style-type: repeat }

@supports规则⽤来检测当前浏览器是否⽀持某个CSS新特性 /* ⽀持⽹格布局 */ @supports (display:grid) { .item { background:red } } /* 不⽀持⽹格布局 */ @supports not (display:grid) { .item { background:red } } /* 同时⽀持弹性布局和⽹格布局 */ @supports (display:flex) and (display:grid) { .item { background:red } } /* ⽀持弹性布局或⽹格布局 */ @supports (display:flex) or (display:grid) { .item { background:red } } /* ⽀持弹性布局 但不⽀持⽹格布局 */ @supports (display:flex) and (not (display:grid)) { .item { background:red } } /* @supports规则的⼤括号⾥ 可以包含其他@规则*/ @supports (display:flex) {  @media screen and (max-width: 750px) {}  @supports (animation: none) { .box { animation: skip }}  @keyframes skip {} } // CSS.supports(propertyName, value) if (window.CSS || CSS.supports || CSS.supports('position', 'sticky')){  document.getElementById('box').style.position = 'sticky' }

增强的CSS属性

fit-content关键字 实现元素尺⼨的⾃适应 单⾏⽂字居中，多⾏⽂字居左对⻬ .box { width:fit-content; margin:0 auto; } /* fit-content关键字的兼容性处理 IE浏览器、Edge79之前不⽀持 但可以⽤在移动端 */ .ex { width:-webkit-fit-content; width:-moz-fit-content;width:fit- content; } position:sticky 黏性定位

1.黏性定位：当元素在屏幕内时，随屏幕滚动;当元素滚出屏幕时，元素变成固定定位

2.黏性定位过去都是使⽤javascript实现，在现代浏览器可以使⽤position: sticky实现

3.在使⽤position: sticky时，务必保证黏性定位元素的祖先元素没有可滚动元素

currentColor 关键字 currentColor 使⽤当前color相同的颜⾊ .box { color: red; border: 1px solid currentColor; /* 边框的颜⾊和⽂字 颜⾊⼀致*/ }

zoom 缩放 除Firefox外其他浏览器都⽀持语法 zoom: normal | reset | | zoom 和 scale 的区别 1. zoom属性缩放的中⼼坐标是元素的左上⻆，且不能修改。transform中的scale缩放默 认的中⼼坐标是元素的中⼼点 2. zoom属性缩放会改变元素占据的尺⼨空间，transform中的scale缩放不会改变元素占 据的尺⼨ 3. zoom属性不会改变元素的层级，不会影响元素的fixed定位 backface-visiblility 元素背⾯是否可⻅backface-visiblility: visible 默认值 元素背⾯是可⻅的 backface-visiblility: hidden 元素背⾯是不可⻅的 常⽤于transform变换中，是否要隐藏元素的背⾯，使变换效果更好 justify-content: space-evenly 每个flex⼦项空⽩间距相等ul{  display: flex;  justify-content: space-evenly; } prefers-color-scheme ⽤来检测当前⽹⻚是否处于深⾊(⿊暗)模式的媒体属性 /* ⽀持三个属性： dark 系统倾向于使⽤深⾊模式 light 系统倾向于使⽤浅⾊模式 no-perference 系统未告知⽤户使⽤的颜⾊⽅案 */ /* 深⾊模式 */ @media (prefers-color-scheme: light) {  body{ color:#333; background-color: #fff; } } /* 浅⾊模式 */ @media (prefers-color-scheme: dark) {  body{ color:#fff; background-color: #000; } } /* 快速对现有⽹⻚进⾏深⾊模式改造的技巧 */ body {  /* 使⽤filter:invert(1)滤镜对⽂字颜⾊和背景⾊等进⾏反相 */  filter: invert(1) hue-rotate(180deg);  background-color: #000; } /* 对图⽚进⾏再次反相将图⽚还原成真实颜⾊ 避免应body反相后 图⽚颜⾊出现异常*/ img{ filter: invert(1) hue-rotate(180deg); } // 判断当前⼿机浏览器是否⽀持深⾊或浅⾊模式 // 是否⽀持 prefers-color-scheme 属性 console.log(window.matchMedia('(prefers-color-scheme)').matches) // true // 是否是浅⾊模式 prefers-color-scheme: light console.log(window.matchMedia('(prefers-color-scheme: light)').matches) // true // 是否是深⾊模式 prefers-color-scheme: dark console.log(window.matchMedia('(prefers-color-scheme: dark)').matches) // false touch-action: manipulation 取消移动端点击事件300ms延迟和双击⾏为/* touch-action: manipulation 只允许浏览器进⾏滚动和持续缩放操作 */ html { touch-action: manipulation; } scroll-behavior: smooth 平滑滚动 safari不⽀持.box{ scroll-behavior: smooth; } /* 平滑滚动 */ overscroll-behavior: contain 滚动嵌套时，终⽌外层滚动 safari不⽀持/* 局部滚动的滚动条滚动到底部边缘时，再继续滚动时，外部容器不会再跟滚动 */ .box{ overscroll-behavior: contain;-ms-overscroll-behavior: contain; } pointer-events: none 元素⽆法点击caret-color: red 更改输⼊光标的颜⾊

/* 设置输⼊光标的颜⾊ 也可以⽤于设置了 contenteditable的html标签 */ input{ caret-color: red; }

简单实⽤的css函数

calc()函数的使⽤⽀持“+”、“-”、“*” 和 “/”四则运算； 可以使⽤百分⽐、px、em、rem等单位，不能使⽤当前CSS属性不⽀持的单位，可以混合使⽤ 各种单位进⾏计算； 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空 格的写法是错误的； 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。 .elm { width: calc(100% - 20px + 5px*2)) } min()函数的使⽤min(expression [, expression]) ⽀持⼀个或多个表达式，使⽤逗号分隔，将最⼩表 达式的值作为返回结果 实现⽹⻚在⼤于等于1024px的PC浏览器显示宽度为1024px，在⼩于1024px时显示宽度为 100% el { width: 1024px; max-width:100% } 使⽤min()函数 el { min(1024px, 100%) } min()⽤来限制最⼤值（即最⼤宽度值为1024px），IE和其他低版本浏览器不⽀持 max()函数的使⽤max(expression [, expression]) ⽀持⼀个或多个表达式，使⽤逗号分隔，将最⼤表 达式的值作为返回结果 实现⽹⻚在⼩于等于1024px的PC浏览器显示宽度为1024px，在⼤于1024px时显示宽度为 100% 使⽤max()函数 el { max(1024px, 100%) } max()⽤来限制最⼩值（即最⼩宽度值为1024px），IE和其他低版本浏览器不⽀持 clamp()函数的使⽤clamp()函数的作⽤是返回⼀个区间范围的值，语法：clamp(MIN, VAL, MAX),MIN表示 最⼩值，MAX表示最⼤值， VAL表示⾸选值，如果VAL在MIN~MAX范围内，则将VAL作为返回值，如果VAL⼤于MAX则将 MAX作为返回值，如果VAL ⼩于MIN，则将MIN作为返回值。clamp(MIN, VAL, MAX)等同于max(MIN, min(VAL, MAX)) IE和其他低版本浏览器不⽀持 宽度⾃适应变化 button{  width: clamp(100px, 50%, 600px) } 不断改变浏览器视⼝的宽度，按钮宽度在100px~600px范围内变化，当屏幕宽度的⼀半⼤于 600px时，宽度为600px 当屏幕宽度的⼀半⼩于600px时，宽度在200px~600px之间，当屏幕宽度的⼀半⼩于200px 时，宽度为200px。 env() 环境变量函数环境变量env()规范的制定是源于解决‘刘海屏’和‘底部触摸⿊条’的移动设备的出现 在使⽤safe-area-inset-*等env的属性时，⼀定要设置meta信息 使⽤4个安全内边距值， 同时设置兜底尺⼨，⽆法使⽤safe-area-inset-*时，会使⽤兜 底的值 env(safe-area-inset-top, 20px) 距离顶部 设置顶部刘海区域安全距离 env(safe-area-inset-right, 1em) 距离右边 env(safe-area-inset-bottom, 20px) 距离底部 env(safe-area-inset-left, 20px) 距离左边 设置底部⼩⿊条安全距离

Css变量和⾃定义属性

变量名:值 声明css变量属性：var(--变量名) 使⽤css变量 深浅⾊模式 :root{ --primary-color: pink; } /* 声明css变量 */ .box{ color: var(--primary-color)} /* 使⽤css变量 */ .box{ color: var(--primary-color, red)} /* 使⽤ var(css变量, 备⽤值) 当css变量⽆效时 使⽤备⽤值 */ // 在js中设置和获取 css⾃定义属性 // 只能借助 xx.style.setProperty 在js中设置 css变量 document.documentElement.style.setProperty('--myColor', '#0000ff') // 使⽤ getComputedStyle(document.querySelector('.box')).getPropertyValue(' --myColor') 获取css变量 console.log(getComputedStyle(document.querySelector('.box')).getPro pertyValue('--myColor')) // #0000ff



【本文地址】


今日新闻

推荐新闻

CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3